<template>
	<div class="wangeditor-box card-box">
		<h5>富文本编辑器</h5>
		<div class="wangeditor-main">
			<Wangeditor @update:modelValue="getMsg" :modelValue="editValue" :token="token"></Wangeditor>
		</div>
		<div>
			<el-button type="primary" @click="editorSubmit">提交</el-button>
		</div>
		<h5 style="margin: 10px 0">--------------内容展示区--------------</h5>
		<div class="wangeditor-html" v-html="editValue"></div>
	</div>
</template>

<script setup>
import { ref, defineAsyncComponent, getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
const Wangeditor = defineAsyncComponent(() => import('@/components/Wangeditor/Wangeditor.vue'));

let editValue = ref(null);
let token = 'asfshgfgjghkjghkghkhgk';
const getMsg = (val) => {
	console.log('编辑器的值', val);
	editValue.value = val;
};
const editorSubmit = () => {
	if (proxy._common.isWangeditorNull(editValue.value)) {
		ElMessage({
			message: '请输入内容！',
			type: 'error'
		});
	} else {
		console.log('提交操作');
	}
};
</script>

<style lang="scss">
.wangeditor-box {
	display: flex;
	flex-direction: column;
	h5 {
		font-size: 16px;
	}
	.wangeditor-main {
		width: 100%;
		height: 600px;
		margin: 10px 0;
	}
	.wangeditor-html {
		overflow: hidden;
		h1,
		h2,
		h3,
		h4,
		h5,
		p,
		ul,
		ol,
		hr {
			margin-top: 10px;
			text-align: justify;
		}
		img {
			max-width: 100%;
		}
		video,
		iframe {
			display: flex;
			margin: 0 auto;
			max-width: 100%;
		}
		p,
		li {
			white-space: pre-wrap; /* 保留空格 */
		}
		blockquote {
			border-left: 8px solid #d0e5f2;
			padding: 10px 10px;
			margin: 10px 0;
			background-color: #f1f1f1;
		}
		code {
			font-family: monospace;
			background-color: #eee;
			padding: 3px;
			border-radius: 3px;
		}
		pre > code {
			display: block;
			padding: 10px;
		}
		table {
			border-collapse: collapse;
		}
		td,
		th {
			border: 1px solid #ccc;
			min-width: 50px;
			height: 20px;
		}
		th {
			background-color: #f1f1f1;
		}
		ul,
		ol {
			padding-left: 20px;
		}
		input[type='checkbox'] {
			margin-right: 5px;
		}
	}
}
</style>
